<template>
  <div>
    <el-form @submit.native.prevent :inline="true">
      <el-form-item>
        <select-address
          v-model="params.address_code"
          placeholder="地址查询"
          auto-top
          clearable
          :bottom-level="2"
          @change="getData()"
        ></select-address>
      </el-form-item>
      <el-form-item>
        <el-date-picker
          v-model="formData.dateRange"
          type="monthrange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          unlink-panels
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <c-select
          :options="enumBusType"
          number-key
          clearable
          placeholder="业务模式"
          v-model="formData.busType"
        ></c-select>
      </el-form-item>
      <el-form-item>
        <select-main-business
          clearable
          placeholder="十二大产业分类"
          v-model="formData.mainBus"
        ></select-main-business>
      </el-form-item>
      <el-form-item>
        <el-input v-model="params.agency_name" clearable placeholder="担保机构名称"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button :loading="loading" icon="el-icon-search" @click="getData()">查询</el-button>
      </el-form-item>
    </el-form>

    <c-table
      border
      class="table-sm"
      v-loading="loading"
      :columns="tableColumns"
      :data="tableData"
    ></c-table>

    <div class="query-pagination">
      <el-pagination
        layout="total, prev, pager, next, jumper"
        :current-page.sync="params.index"
        :page-size="params.size"
        :total="totalCount"
        @current-change="getData"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

import SelectAddress from '@/components/select/SelectAddress'
import { enumBusType } from './reportMixins'
import SelectMainBusiness from '@/credit/components/select/SelectMainBusiness'
export default {
  components: {
    SelectAddress,
    SelectMainBusiness,
  },
  props: {},
  data() {
    return {
      enumBusType,
      loading: false,
      params: {
        index: 1,
        size: 10,
        address_code: '',
        'agency_type.eq': 6,
        'orWhereAnd.access_agency_id.eq': '',
        'orWhereAnd.access_status.gt': 0,
        'orWhereAnd.access_status.in': '0,1,2,3',
        'orWhereAnd.service_id.eq': '',
      },
      formData: {},
      order: {
        agency_create_time: 'desc',
      },
      tableName: 'credit_agency_access_view',
      tableData: [],
      totalCount: 0,
      tableColumns: [
        { attrs: { label: '机构名称', prop: 'agency_name' } },
        { attrs: { label: '累计项目数（个）', prop: 'p' } },
        { attrs: { label: '累计金额（万元）', prop: 'p1' } },
        { attrs: { label: '期末在保项目数（个）', prop: 'p2' } },
        { attrs: { label: '期末在保余额（万元）', prop: 'p3' } },
        { attrs: { label: '累计新增在保数（个）', prop: 'p4' } },
        { attrs: { label: '累计新增在保金额（万元）', prop: 'p5' } },
        { attrs: { label: '新增解保项目数（个）', prop: 'p6' } },
        { attrs: { label: '新增解保金额（万元）', prop: 'p7' } },
      ],
    }
  },
  computed: {
    ...mapGetters(['clientId']),
  },
  watch: {},
  created() {
    this.params['orWhereAnd.access_agency_id.eq'] = this.clientId
    this.params['orWhereAnd.service_id.eq'] = this.clientId
    this.getData()
  },
  mounted() {},
  methods: {
    async getData(index = 1) {
      this.params.index = index
      const [res] = await this.$utils.promise(
        this.$api.getData(this.$serviceName, this.tableName, this.params, this.order)
      )
      const data = (res && res.data) || {}

      this.tableData = data.data || []
      this.totalCount = data.totalCount || 0
    },
  },
}
</script>

<style lang="scss" scoped></style>
